import BaseView from "../base/view/BaseView";
import GuideManager from "./GuideManager";
import GuideEventName from "./GuideEventName";
import GuideItemModel from "./GuideItemModel";
import UIManager from "../ui/UIManager";
import { DIR } from "../tools/Define";
import GameManager from "../game/GameManager";
const { ccclass, property } = cc._decorator;

@ccclass
export default class GuideView extends BaseView {

    // 点击区域, 也是pointer和rich的相对布局位置
    @property(cc.Node)
    inner: cc.Node = null;
    // 指针
    @property(cc.Node)
    pointer: cc.Node = null;
    // 文本所在节点
    @property(cc.Node)
    richNode: cc.Node = null;
    // 说明文本
    @property(cc.Label)
    tutorialRich: cc.RichText = null;
    // 动态遮挡
    @property(cc.Node)
    renderMask: cc.Node = null;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    protected model: GuideManager;

    private maskInterval = 0.2;

    private dstPos: cc.Vec2 = cc.Vec2.ZERO

    private dstSize: cc.Size = cc.Size.ZERO;

    private initPos: cc.Vec2 = cc.Vec2.ZERO;

    start() {
        this.node.active = false;
        // this.setModel(GuideManager.instance())
        this.eventProxy.addEventListener(GuideEventName.START, this.guideStart, this)
        this.eventProxy.addEventListener(GuideEventName.END, this.guideEnd, this)
        this.eventProxy.addEventListener(GuideEventName.UPDATE, this.guideStep, this)
        // this.node.on(cc.Node.EventType.TOUCH_START, this.onBackgroundTouch, this);
    }

    onBackgroundTouch() {
        return false
    }

    show() {
        UIManager.instance().pushGuide(this)
    }

    guideStart() {
        this.node.active = true;
        this.initPos = this.renderMask.position;

    }

    guideEnd() {
        this.pointer.active = false;
        this.node.active = false;
        this.renderMask.scale = 1;
        this.renderMask.position = this.initPos;
    }

    guideStep() {
        this.node.runAction(cc.sequence([cc.delayTime(0.2), cc.callFunc(() => {
            this.guideUpdate();
        })]))
    }
    showMask() {
        let maskSz = this.renderMask.getContentSize();
        // this.renderMask.x = 0;
        // this.renderMask.y = 0;
        // this.renderMask.scale = 1;
        this.renderMask.stopAllActions();
        // cc.log('this.dstSize.width / maskSz.width  ', this.dstSize.width / maskSz.width)
        // cc.log(' this.dstSize.height / maskSz.height   ', this.dstSize.height / maskSz.height)
        this.renderMask.runAction(cc.spawn(cc.scaleTo(
            this.maskInterval,
            this.dstSize.width / maskSz.width,
            this.dstSize.height / maskSz.height
        ), cc.moveTo(
            this.maskInterval,
            this.dstPos.x,
            this.dstPos.y
        )))
        // this.renderMask.runAction();
        // this.renderMask.runAction();
    }
    guideUpdate() {

        this.pointer.stopAllActions();
        this.pointer.rotation = 0;
        this.pointer.scaleY = 1;
        let item: GuideItemModel = this.model.getItemModel()
        if (!item) {
            return;
        }
        this.pointer.active = true;
        // cc.log('item.getFingerDir() ', item.getFingerDir())

        let posInfo: string[] = item.getPosInfo();
        // cc.log(' posInfo ', posInfo)
        let posStart: cc.Node = UIManager.instance().find(posInfo[0]);

        if (posStart) {
            // cc.log(' posStart.position ', posStart.position)
            let worldPos = posStart.convertToWorldSpaceAR(cc.Vec2.ZERO)
            // cc.log(' worldPos ', worldPos)
            // this.pointer.position =  worldPos;
            this.pointer.x = worldPos.x
            this.pointer.y = worldPos.y
            this.dstPos.x = worldPos.x;
            this.dstPos.y = worldPos.y;
            this.dstSize.width = posStart.width;
            this.dstSize.height = posStart.height;
        } else {
            cc.warn(' posStart is null ')
            cc.log(' this.path', posInfo[0])
            this.model.next();
            return;
        }

        let offsetx = (this.pointer.width) / 2
        let offsety = (this.pointer.height) / 2
        switch (item.getFingerDir()) {
            case DIR.LEFT:
                // this.pointer.setAnchorPoint(0, 0.5)
                this.pointer.rotation = -90;
                this.pointer.x += offsetx
                break;
            case DIR.RIGHT:
                // this.pointer.setAnchorPoint(1, 0.5)
                this.pointer.rotation = 90;
                this.pointer.x -= offsetx
                break;
            case DIR.UP:
                // this.pointer.setAnchorPoint(0.5, 1)
                this.pointer.y -= offsety
                break;
            case DIR.DOWN:
                // this.pointer.setAnchorPoint(0.5, 0)
                this.pointer.scaleY = -1;
                this.pointer.y += offsety
                break;
        }

        if (posInfo.length > 1) {
            let worldPos = this.pointer.position;
            let posEnd: cc.Node = UIManager.instance().find(posInfo[1])
            if (posEnd) {
                // let callback = 
                let endPos = posEnd.parent.convertToWorldSpaceAR(posEnd.position)
                endPos.y -= offsety
                // cc.log(' endPos ', endPos)
                this.pointer.runAction(cc.repeatForever(cc.sequence([cc.moveTo(1, endPos), cc.callFunc(() => {
                    this.pointer.position = worldPos;
                })])))
            } else {
                cc.log('posEnd is null  ')
            }
        } else {
            switch (item.getFingerDir()) {
                case DIR.LEFT:
                case DIR.RIGHT:
                    this.pointer.runAction(cc.repeatForever(cc.sequence([cc.moveBy(0.5, 20, 0), cc.moveBy(0.5, -20, 0)])))
                    break;
                case DIR.UP:
                case DIR.DOWN:
                    this.pointer.runAction(cc.repeatForever(cc.sequence([cc.moveBy(0.5, 0, 20), cc.moveBy(0.5, 0, -20)])))
                    break;
            }

        }
        this.tutorialRich.string = GameManager.instance().getLocalString(item.getDesc())
        this.node.runAction(cc.sequence([cc.delayTime(0.1), cc.callFunc(() => {
            this.setDescWH(item)
        })]))
        this.showMask();
    }


    setDescWH(item) {
        // cc.log(' this.richNode.width ', this.richNode.width)
        let height = (this.pointer.height + this.richNode.height);
        let width = (this.pointer.width + this.richNode.width);
        switch (item.getDescDir()) {
            case DIR.LEFT:
                // this.richNode.setAnchorPoint(1, 0.5)
                this.richNode.x = this.pointer.x - width;
                this.richNode.y = this.pointer.y
                break;
            case DIR.RIGHT:
                // this.richNode.setAnchorPoint(0, 0.5)
                this.richNode.x = this.pointer.x + width
                this.richNode.y = this.pointer.y
                break;
            case DIR.UP:
                // this.richNode.setAnchorPoint(0.5, 0)
                this.richNode.x = this.pointer.x
                this.richNode.y = this.pointer.y + height
                break;
            case DIR.DOWN:
                // this.richNode.setAnchorPoint(0.5, 1)
                this.richNode.x = this.pointer.x
                this.richNode.y = this.pointer.y - height
                break;
        }
    }

}
